/*
 * @Author: your name
 * @Date: 2021-12-12 22:06:25
 * @LastEditTime: 2022-04-13 01:21:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /visualNotes/src/components/Node/UseCase/index.tsx
 */
import React , { useState }from "react";
import { Handle, Position } from "react-flow-renderer";
import { NodeProps } from "..";
import EditMenu from "../EditMenu";
import style from "./index.module.less";

const Gather = (props: NodeProps) => {
  const [handleScale, setHandleScale] = useState(1);   
  
  const handleMouseEnter = () => {   
    setHandleScale(2);   
  };  
  
  const handleMouseLeave = () => {  
    setHandleScale(1);   
  };  
  return (
    <div className={style.container}>
        <EditMenu node={props} isEdited={false}></EditMenu>
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
      />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }} 
      />

    </div>
  );
};

export default Gather;
